<template>
  <div class="login">
    <div class="form">
      <el-form label-width="80px">
        <h1>后台登录</h1>
        <el-form-item label="用户名称">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input v-model="user.password" type="password" @keyup.native.enter="login"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="success" @click="reguser">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import request from '../utils/request'
export default {
  name: 'Login',
  data() {
    return {
      user: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    async login() {
      let params = new URLSearchParams()
      params.append('username', this.user.username)
      params.append('password', this.user.password)
      const { data: res } = await this.$http.post('api/login', params)
      if (res.status !== 0) return this.$message.error('登陆失败!')
      this.$message.success('登陆成功!')
      // console.log(res)
      this.$store.commit('setRightList', res.rights.rights)
      this.$store.commit('setUsername', res.username)
      window.sessionStorage.setItem('token', res.token) // 步骤1.
      this.$router.push('/home') // 步骤2.
      window.location.reload()
    },
    reguser() {
      this.$router.push('/reguser')
    },
  },
}
</script>

<style scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 背景图片满屏设置 */
  width: 100%;
  height: 100%;
  background-image:url('../assets/images/1217-1.png');
  background-repeat: no-repeat;
  background-size: cover;
}
.login h1 {
  text-align: center;
  margin: 10px auto;
  color: #666666;
}
.el-form {
    padding: 15px 70px 0 70px;
    background: #fff;
    opacity:0.8;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(255, 255, 255, .5);
  }  
    .el-input {
      width: 200px;
    }
    label {
      width: 50px;
      display: inline-block;
      text-align: justify;
      text-align-last: justify;
    }
    .el-form-item {
      width: 100%;
      text-align: right;
  }
</style>
